<!-- 景点编辑模态框 -->
<template>
  <div v-if="modelValue" class="fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
      <!-- 背景遮罩 -->
      <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="$emit('update:modelValue', false)"></div>

      <!-- 模态框内容 -->
      <div class="inline-block w-full max-w-2xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-lg font-medium text-gray-900">
            {{ attraction ? '编辑景点' : '新增景点' }}
          </h3>
          <button @click="$emit('update:modelValue', false)" class="text-gray-400 hover:text-gray-500">
            <font-awesome-icon icon="times" class="text-xl" />
          </button>
        </div>

        <form @submit.prevent="handleSubmit" class="space-y-6">
          <!-- 基本信息 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">景点名称</label>
              <input 
                v-model="form.name"
                type="text"
                required
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">分类</label>
              <select 
                v-model="form.category"
                required
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
              >
                <option v-for="category in categories" :key="category" :value="category">
                  {{ category }}
                </option>
              </select>
            </div>
          </div>

          <!-- 图片上传 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">景点图片</label>
            <div class="flex items-center space-x-4">
              <div v-if="form.imageUrl" class="relative w-24 h-24">
                <img 
                  :src="form.imageUrl"
                  class="w-24 h-24 object-cover rounded-lg"
                  alt="景点图片"
                />
                <button 
                  @click="form.imageUrl = ''"
                  class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center"
                >
                  <font-awesome-icon icon="times" class="text-xs" />
                </button>
              </div>
              <div 
                v-else
                class="w-24 h-24 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-blue-500"
                @click="handleImageUpload"
              >
                <font-awesome-icon icon="plus" class="text-gray-400 text-xl" />
              </div>
              <input 
                type="file" 
                ref="fileInput"
                class="hidden"
                accept="image/*"
                @change="onFileChange"
              />
            </div>
          </div>

          <!-- 评分和状态 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">评分</label>
              <input 
                v-model="form.rating"
                type="number"
                min="0"
                max="5"
                step="0.1"
                required
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
              <select 
                v-model="form.status"
                required
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
              >
                <option v-for="status in statusOptions" :key="status" :value="status">
                  {{ status }}
                </option>
              </select>
            </div>
          </div>

          <!-- 按钮组 -->
          <div class="flex justify-end space-x-4 pt-4">
            <button
              type="button"
              @click="$emit('update:modelValue', false)"
              class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200"
            >
              取消
            </button>
            <button
              type="submit"
              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
            >
              确定
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'

const props = defineProps<{
  modelValue: boolean
  attraction?: any
  categories: string[]
  statusOptions: string[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'submit', value: any): void
}>()

const fileInput = ref<HTMLInputElement | null>(null)
const form = reactive({
  name: '',
  category: '',
  imageUrl: '',
  rating: 0,
  status: ''
})

// 监听 attraction 变化，更新表单数据
watch(() => props.attraction, (newVal) => {
  if (newVal) {
    Object.assign(form, {
      name: newVal.name,
      category: newVal.category,
      imageUrl: newVal.imageUrl,
      rating: newVal.rating,
      status: newVal.status
    })
  } else {
    // 重置表单
    Object.assign(form, {
      name: '',
      category: '',
      imageUrl: '',
      rating: 0,
      status: ''
    })
  }
}, { immediate: true })

// 处理图片上传
const handleImageUpload = () => {
  fileInput.value?.click()
}

const onFileChange = (event: Event) => {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    const reader = new FileReader()
    reader.onload = (e) => {
      form.imageUrl = e.target?.result as string
    }
    reader.readAsDataURL(input.files[0])
  }
}

// 提交表单
const handleSubmit = () => {
  emit('submit', {
    ...(props.attraction || {}),
    ...form
  })
  emit('update:modelValue', false)
}
</script> 